<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米首页</title>
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
	</head>
	<body>
		<!-- 按照粗刀，将网页分成三个部分：页头、主体、页尾 
			 结构化标记替代结构
			 页头----header元素----结构化标记----有利于SEO优化
			 主要完成：导航栏、登录、购物车等
			 主体----main元素----结构化标记----有利于SEO优化
			 页尾----footer元素----结构化标记----有利于SEO优化
			 根据页头、主体、页尾设定三个外部样式
		-->
		<!-- 1.页面头部： -->
		<header>
			<div id="wrapper">
				<div class="left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米网移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="fix">Select Region</a></li>
					</ul>
				</div>
				<div class="right">
					<ul>
						<li><a href="#" class="fix_2">登录</a></li>
						<li><a href="#">注册</a></li>
						<!-- i元素：行元素，一行内显示 -->
						<li class="fix_1"><i class="buy"></i><a href="#">购物车(0)</a></li>
					</ul>
				</div>
			</div>
		</header>
		<!-- 2.页面头部 -->
		<main>
			<!-- 2.1面包屑导航 结合结构化标记 nav元素-->
			<nav>
				<!-- 2.2中控区 -->
				<div id="nav_wrapper">
					<div class="nav_left">
						<ul>
							<li><img src="img/" alt="logo"/></li>
							<li><img src="img/donghua.gif" alt="donghua"/></li>
							<li><a href="#">小米盒子</a></li>
							<li><a href="#">红米</a></li>
							<li><a href="#">平板</a></li>
							<li><a href="#">电视</a></li>
							<li><a href="#">盒子</a></li>
							<li><a href="#">路由器</a></li>
							<li><a href="#">智能硬件</a></li>
							<li><a href="#">服务</a></li>
							<li><a href="#">社区</a></li>
						</ul>
					</div>
					<div class="nav_right">
						<div class="search">
							<div class="icon"><img src="img/search.png" alt="icon_1" /></div>
							<span>平衡车</span>
							<span>小米手机4c</span>
						</div>
					</div>
				</div>
			</nav>
			<!-- 2.2左栏和轮播图区 结合结构化标记 section元素：区域划分、轮播、产品展示 -->
			<section id="first">
				<!-- 2.2.1左栏 ：atricle元素：侧边栏、左栏【自己复制】 -->
				<div class="banner"><img src="img/banner01.jpg"/></div>
				<article id="leftsidebar">
					<ul class="sidebar">
						<li><a href="#" class="fix_1">手机 平板 电话卡</a> <span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">电视 盒子</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">路由器 智能硬件</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">移动电源 插线板</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">耳机 音箱</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">电池 存储卡</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">保护套 后盖</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">贴膜 其他配件</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">米兔 服装</a><span class="rightalignment">></span></li>
						<li><a href="#" class="fix_1">箱包 其他周边</a><span class="rightalignment">></span></li>
					</ul>
				</article>
				<!-- 2.2.2轮播图区 figure元素：轮播图 -->
				<figure></figure>
					
			</section>
			<!-- 产品展示区 -->
			<section id="second">
				<div class="left_nav"><img src="img/left.png" alt="" /></div>
				<div class="one"><img src="img/subnav_icon01.png" alt="" /></div>
				<div class="two"><img src="img/subnav_icon02.jpg" alt="" /></div>
				<div class="three"><img src="img/subnav_icon03.png" alt="" /></div>
			</section>
			<!-- 明星单品 -->
			<section id="third">
					<div id="single">小米明星单品
						<span>></span>
						<span><</span>
						</div>
			</div>
					<div id="starproduct">
						<div class="products_1">
							<img src="img/chazuo.png" alt="" />
							<p class="ziti">小米智能插座 基础班</p>
							<p class="introduction">手机远程遥控，让普通电器变智能</p>
							<p class="price">49元</p>
							</div>
						<div class="products_2">
							<img src="img/jinghuaqi.png" alt="" />
							<p class="ziti">小米空气净化器2</p>
							<p class="introduction">净化能力高达310m3/h</p>
							<p class="price">699元</p>
							</div>
						<div class="products_3">
							<img src="img/chaban.png" alt="" />
							<p class="ziti">小米智能插线板</p>
							<p class="introduction">手机远程控制家中电器，智能节电</p>
							<p class="price">69元</p>
							</div>
						<div class="products_4">
							<img src="img/erji.png" alt="" />
							<p class="ziti">小米圈铁耳机</p>
							<p class="introduction">动圈+动铁，双发声单元</p>
							<p class="price">69元</p>
							</div>
						<div class="products_5">
							<img src="img/luyouqi.png" alt="" />
							<p class="ziti">小米路由器 青春版</p>
							<p class="introduction">将高性能路由器，凝聚于掌心大小</p>
							<p class="price">79元</p>
							</div>
					</div>
			</section>
			<!-- 大产品区 -->
			<section id="bg">
			<!-- 智能硬件 -->
				<section id="smartmachine">
					<article id="smfont">
						智能硬件
						<img src="img/hardware_morebtn.png" alt="">
						<a href="#">查看全部</a>
					</article>
					<article id="smimg">
						<div class="type1">
							<p class="ziti">米兔儿童电话手表</p>
							<p class="introduction">安全防走失，宝贝的贴身护卫</p>
							<p class="price">299元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_tizhongcheng.png" alt="" class="one"/>
							<p class="ziti">小米体重秤</p>
							<p class="introduction">高精度压力传感器，手机管理全家健康</p>
							<p class="price">99元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_luyouqi.png" alt="" class="two"/>
							<p class="ziti">小米路由器3</p>
							<p class="introduction">更安全更稳定，安全发售</p>
							<p class="price">149元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_shouhuan.png" alt="" class="three"/>
							<p class="ziti">小米手环 光感版</p>
							<p class="introduction">实时监测心率，科学运动</p>
							<p class="price">99元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_anfang.png" alt="" class="four"/>
							<p class="ziti">小米智能安防套装</p>
							<p class="introduction">智能警戒，为您的家增添一份安心</p>
							<p class="price">699元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_xiaoyi.png" alt="" class="five"/>
							<p class="ziti">小米运动相机</p>
							<p class="introduction">边玩边录边拍，手机随时分享</p>
							<p class="price">399元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_xieya.png" alt="" class="six"/>
							<p class="ziti">iHealth智能血压计（蓝牙版）</p>
							<p class="introduction">送给父母的健康礼物</p>
							<p class="price">199元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_shexiangtou.png" alt="" class="seven"/>
							<p class="ziti">小米智能摄像机 夜视版</p>
							<p class="introduction">能看能听能说，手机远程观看</p>
							<p class="price">149元</p>
						</div>
						<div class="type2">
							<img src="img/haraware_light.png" alt="" class="eight"/>
							<p class="ziti">Yeelight床头灯</p>
							<p class="introduction">触摸式操作，给卧室1600万种颜色</p>
							<p class="price">699元</p>
						</div>
					</article>
				</section>
				<section id="match">
					<article id="font">
						搭配
						<span>电池储存卡</span>
						<span>电源</span>
						<span>耳机音箱</span>
						<span>热门</span>
					</article>
					<article id="img1">
						<ul>
							<li class="one"><img src="img/dapei_icon01.png" alt="" /></li>
							<li class="two"><img src="img/dapei_icon03.png" alt="" class="one"/>
								<p class="ziti">小米路由器3</p>
								<p class="introduction">更安全更稳定，安全发售</p>
								<p class="price">149元</p>
								</li>
							<li class="three"><img src="img/dapei_icon04.png" alt="" class="two"/>
								<p class="ziti">小米手环 光感版</p>
								<p class="introduction">实时监测心率，科学运动</p>
								<p class="price">99元</p>
							</li>
							<li class="four"><img src="img/dapei_icon05.png" alt="" class="three"/>
								<p class="ziti">小米智能安防套装</p>
								<p class="introduction">智能警戒，为您的家增添一份安心</p>
								<p class="price">699元</p>
							</li>
							<li class="five"><img src="img/dapei_icon06.png" alt="" class="four"/>
								<p class="ziti">小米运动相机</p>
								<p class="introduction">边玩边录边拍，手机随时分享</p>
								<p class="price">399元</p>
							</li>
						</ul>
					</article>
					<article id="img2">
						<div class="type1">
							<img src="img/dapei_icon02.png" alt="" class="one"/>
						</div>
						<div class="type2">
							<img src="img/dapei_icon07.png" alt="" class="two"/>
							<p class="ziti">小米智能摄像机 夜视版</p>
							<p class="introduction">能看能听能说，手机远程观看</p>
							<p class="price">149元</p>
						</div>
						<div class="type2">
							<img src="img/dapei_icon08.png" alt="" class="three"/>
							<p class="ziti">小米智能摄像机 夜视版</p>
							<p class="introduction">能看能听能说，手机远程观看</p>
							<p class="price">149元</p>
						</div>
						<div class="type2">
							<img src="img/dapei_icon09.png" alt="" class="four"/>
							<p class="ziti">小米智能摄像机 夜视版</p>
							<p class="introduction">能看能听能说，手机远程观看</p>
							<p class="price">149元</p>
						</div>
						<div class="type3">
							<img src="img/content-top_icon01.png" alt="" class="five"/>
							<img src="img/content-top_icon02.png" alt="" class="six"/>
						</div>
					</article>
				</section>
				<section id="peripherals">
					<article id="font">
						周边
						<span>箱包</span>
						<span>生活周边</span>
						<span>米兔</span>
						<span>服装</span>
						<span>热门</span>
					</article>
					<article id="img">
						<div class="type1">
							<img src="img/peijian_icon01.png" alt="" class="one"/>
						</div>
						<div class="type2">
							<img src="img/peijian_icon03.png" alt="" class="two"/>
							<p class="ziti">小米金属鼠标垫 小号</p>
							<p class="introduction">49元</p>
							<p class="price">6483人评价</p>
						</div>
						<div class="type2">
							<img src="img/peijian_icon04.png" alt="" class="three"/>
							<p class="ziti">小米皮质记事本</p>
							<p class="introduction">19元</p>
							<p class="price">3050人评价</p>
						</div>
						<div class="type2">
							<img src="img/peijian_icon04.png" alt="" class="four"/>
							<p class="ziti">小米LED随身灯 增强版</p>
							<p class="introduction">19.9元</p>
							<p class="price">5.6万人评价</p>
						</div>
						<div class="type2">
							<img src="img/peijian_icon06.png" alt="" class="five"/>
							<p class="ziti">手机支架 小蜜蜂</p>
							<p class="introduction">19元</p>
							<p class="price">6.9万人评价</p>
						</div>
						<div class="type1">
							<img src="img/peijian_icon02.png" alt="" class="six"/>
						</div>
						<div class="type2">
							<img src="img/peijian_icon07.png" alt="" class="seven"/>
							<p class="ziti">小米防尘塞 MI标</p>
							<p class="introduction">3.9元</p>
							<p class="price">5.6万人评价</p>
						</div>
						<div class="type2">
							<img src="img/peijian_icon08.png" alt="" class="eight"/>
							<p class="ziti">小米百变随身杯</p>
							<p class="introduction">149元</p>
							<p class="price">8461人评价</p>
						</div>
						<div class="type2">
							<img src="img/peijian_icon09.png" alt="" class="nine"/>
							<p class="ziti">小米电源线收纳盒</p>
							<p class="introduction">39元</p>
							<p class="price">8461人评价</p>
						</div>
						<div class="type3">
							<img src="img/peijian_icon10.png" alt="" class="ten"/>
							<img src="img/content-top_icon02.png" alt="" class="eleven"/>
						</div>
					</article>
				</section>
				<section id="accessory">
					<article id="font">
						配件
						<span>热门</span>
						<span>保护套</span>
						<span>后盖</span>
						<span>贴膜</span>
						<span>热门</span>
					</article>
					<article id="img">
						<div class="type1">
							<img src="img/zhoubian_icon01.png" alt="" class="one"/>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon03.png" alt="" class="two"/>
							<p class="ziti">小米自拍杆</p>
							<p class="introduction">49元</p>
							<p class="price">6.4万人评价</p>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon04.png" alt="" class="three"/>
							<p class="ziti">小米手机5 钢化膜（0.22mm）</p>
							<p class="introduction">29元</p>
							<p class="price">1万人评价</p>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon05.png" alt="" class="four"/>
							<p class="ziti">红米手机Note3 钢化膜（0.22mm）</p>
							<p class="introduction">699元</p>
							<p class="price">5.6万人评价</p>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon06.png" alt="" class="five"/>
							<p class="ziti">小米Note 标准贴膜（2片装）</p>
							<p class="introduction">19元</p>
							<p class="price">2.1万人评价</p>
						</div>
						<div class="type1">
							<img src="img/zhoubian_icon02.png" alt="" class="six"/>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon07.png" alt="" class="seven"/>
							<p class="ziti">小米随身WIFI</p>
							<p class="introduction">19.9元</p>
							<p class="price">30.1万人评价</p>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon08.png" alt="" class="eight"/>
							<p class="ziti">小米智能摄像机 夜视版</p>
							<p class="introduction">39元</p>
							<p class="price">1.2万人评价</p>
						</div>
						<div class="type2">
							<img src="img/zhoubian_icon09.png" alt="" class="nine"/>
							<p class="ziti">小米手机5 硅胶保护套</p>
							<p class="introduction">69元</p>
							<p class="price">215人评价</p>
						</div>
						<div class="type3">
							<img src="img/zhoubian_icon10.png" alt="" class="ten"/>
							<img src="img/content-top_icon02.png" alt="" class="eleven"/>
					</article>
				</section>
				<section id="discussion">
					<article id="font">
						热评产品
					</article>
					<article id="img">
						<div>
							<img src="img/hotproduct_icon01.png" alt="" />
							<p class="fix_3">超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
							<h1>来自于 香草忘忧 的评价</h1>
							<h2>米兔手机U盘  <span>49.9元</span></h2>
						</div>
						<div>
							<img src="img/hotproduct_icon02.png" alt="" />
							<p>绝对5星，音质挺好，包装也不错，物流也快</p>
							<h1>来自于 星星活火 的评价</h1>
							<h2>小米活塞耳机 标准版  <span>49.9元</span></h2>
						</div>
						<div>
							<img src="img/hotproduct_icon03.png" alt="" />
							<p>做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
							<h1>来自于 林新城 的评价</h1>
							<h2>小米插线板  <span>49元</span></h2>
						</div>
						<div>
							<img src="img/hotproduct_icon04.png" alt="" />
							<p>一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
							<h1>来自于 人生如戏 的评价</h1>
							<h2>小米头戴式耳机 标准版  <span>499元</span></h2>
						</div>
					</article>
				</section>
				<section id="content">
					<article id="font">
						内容
					</article>
					<article id="img">
						<div class="one">
							<ul>
								<li class="title1">图书</li>
								<li class="a"><a href="#">阿弥陀佛，么么哒</a></li>
								<li class="introduce1">大冰新书，12个不舍得读完的、暖心</li>
								<li class="introduce2">的，真实的江湖故事</li>
								<li class="price">9.99元</li>
								<li class="fix_5"><img src="img/classify_icon01.png" alt="" /></li>
							</ul>
						</div>
						<div class="two">
							<ul>
								<li class="title2">主题</li>
								<li class="a"><a href="#">主题市场</a></li>
								<li class="introduce1">众多个性主题、百变锁屏与自由桌面</li>
								<li class="introduce2">让你的手机与众不同！</li>
								<li class="price">MIUI</li>
								<li><img src="img/classify_icon02.png" alt="" /></li>
							</ul>	
						</div>
						<div class="three">
							<ul>
								<li class="title3">游戏</li>
								<li class="a"><a href="#">米柚手游模拟器</a></li>
								<li class="introduce3">在电脑上玩遍小米所有手游</li>
								<li class="price">免费</li>
								<li class="fix_4"><img src="img/classify_icon03.png" alt="" /></li>
							</ul>	
						</div>
						<div class="four">
							<ul>
								<li class="title4">应用</li>
								<li class="a"><a href="#">2015年度应用</a></li>
								<li class="introduce3">精彩世界，尽情下载</li>
								<li class="price">免费</li>
								<li class="fix_4"><img src="img/classify_icon04.png" alt="" /></li>
							</ul>	
						</div>
					</article>
				</section>
				<section id="video">
					<article id="font">
						视频
					</article>
					<article id="img">
						<div>
							<img src="img/video_icon01.jpg" alt="" class="type1"/>
							<span></span>
							<p class="type1">笑喷了，沈腾爆笑出演，6集联播</p>
							<p class="type2">小米Max沈腾爆笑预告全集</p>
						</div>
						<div>
							<img src="img/video_icon02.jpg" alt="" class="type1"/>
							<span></span>
							<p class="type1">小米2016春季新品发布会</p>
							<p class="type2">小米5 十余项黑科技亮相</p>
						</div>
						<div>
							<img src="img/video_icon03.jpg" alt="" class="type1"/>
							<span></span>
							<p class="type1">15秒了解小米5 有多快</p>
							<p class="type2">华少用超快语速告诉你小米5 到底有多快</p>
						</div>
						<div>
							<img src="img/video_icon04.jpg" alt="" class="type1"/>
							<span></span>
							<p class="type1">《去探索》 小米年度品牌视频</p>
							<p class="type2">与小米一起探索黑科技</p>
						</div>
					</article>
				</section>
			</section>
		</main>
		<footer></footer>
	</body>
</html>